<template>
  <div class="app-container">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-button
          :disabled="chooseDeviceCoreList.length < 2"
          type="primary"
          @click="dialogAnalysisVisible = true"
        >{{ $t('comparison') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="chooseDeviceCoreList.length < 2"
          type="primary"
          @click="dialogCommonSettingVisible = true"
        >{{ $t('setting') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <product-series-cascade @change="productChange"/>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="deviceName"
          clearable
          :placeholder="$t('device')+$t('name')"
          @change="searchNameChange"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="phoneNumber"
          clearable
          :placeholder="$t('cardNumber')"
          @change="phoneNumberChange"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="status" @change="statusChange">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <province-city-cascade @change="provinceCityChange"/>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="warnDesc"
          icon="el-icon-warning"
          type="primary"
          @click="unWarnDescDevices"
        />
        <el-button
          v-else
          icon="el-icon-warning-outline"
          plain
          @click="warnDescDevices"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="follow"
          icon="el-icon-star-on"
          type="primary"
          @click="unFocusDevices"
        />
        <el-button
          v-else
          plain
          icon="el-icon-star-off"
          @click="isFocusDevices"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="extendSearch?'el-icon-caret-top':'el-icon-caret-bottom'"
          @click="extendSearch = !extendSearch"
        >{{ $t('extend') + $t('search') }}
        </el-button>
      </el-form-item>
    </el-form>
    <user-device-search v-show="extendSearch" style="margin-top: 10px;width: 1100px" @change="searchChange"/>
    <el-table
      :data="deviceList"
      style="width: 100%;"
      @selection-change="handleSelectionChange"
      @cell-click="getSensor"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column :label="$t('device')+$t('name')">
        <template slot-scope="scope">
          <i>{{ scope.row.deviceName }} ({{ scope.row.deviceCore }})</i>
        </template>
      </el-table-column>
      <el-table-column prop="phoneNumber" :label="$t('cardNumber')"/>
      <el-table-column
        prop="phoneStatus"
        :label="$t('card')+$t('status')"

        :formatter="formatPhoneStatus"
        width="80"
      />
      <el-table-column :label="$t('surplus')" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.surplus }}%</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('status')">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status=='ONLINE'?'success':'danger'">{{ formatDeviceStatus(scope.row) }}</el-tag>
        </template>
      </el-table-column>
      <!--        <el-table-column width="60"  :label="$t('signal')">-->
      <!--          <template slot-scope="scope">-->
      <!--            <div style="position: relative">-->
      <!--              <app-signal-->
      <!--                :signal="scope.row.netSignal"-->
      <!--                :status="scope.row.status"-->
      <!--              />-->
      <!--            </div>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <el-table-column :label="$t('function')" width="180">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-price-tag"
            @click.stop="tag(scope.row)"
          >{{ $t('tag') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-s-tools"
            @click.stop="deviceSetting(scope.row)"
          >{{ $t('setting') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-more"
            @click.stop="gotoManage(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin: 15px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :visible.sync="showSetting"
      :title="device.deviceName"
      width="1200px"
      top="15px"
    >
      <device-setting
        :device-core="device.deviceCore"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogCommonSettingVisible"
      destroy-on-close
      width="1400px"
      top="15px"
    >
      <device-list-setting
        v-if="dialogCommonSettingVisible"
        :device-core-list="chooseDeviceCoreList"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-drawer
      size="70%"
      :visible.sync="drawer"
      direction="rtl"
    >
      <div class="box-card" style="height: calc(100vh - 92px)">
        <div
          class="uni-scroll"
          style="height: calc(100vh - 100px)"
        >
          <sensor-camera-list :device="device"/>
        </div>
      </div>
    </el-drawer>

    <el-dialog
      :visible.sync="dialogAnalysisVisible"
      top="15px"
      width="90%"
    >
      <device-sensor-analysis
        v-if="dialogAnalysisVisible"
        :device-core-list="chooseDeviceCoreList"
      />
    </el-dialog>

    <el-dialog
      :title="$t('tag')"
      :visible.sync="dialogTagVisible"
    >
      <tag-device v-if="dialogTagVisible" :device="device"/>
    </el-dialog>

  </div>
</template>
<script>
import SensorCameraList from '@/components/SensorCameraList'
import TagDevice from '@/components/TagDevice'
import { formatDate, formatDeviceStatus, formatPhoneStatus, listDeviceStatus } from '@/util/common'
import {
  getPageSize,
  getQrCodeTemp,
  getSearchDeviceName,
  getSearchDeviceStatus,
  getUserId,
  setPageSize,
  setSearchDeviceName,
  setSearchDeviceStatus
} from '@/util/storage'
import { pageGetDeviceDetails } from '@/api/iot/iotDeviceBelongApi'
import DeviceSetting from '@/components/DeviceSetting'
import DeviceListSetting from '@/components/DeviceListSetting'
import AppSignal from '@/components/AppSignal'
import AppSurplus from '@/components/AppSurplus'
import ProductSeriesCascade from '@/components/ProductSeriesCascade'
import ProvinceCityCascade from '@/components/ProvinceCityCascade'
import UserDeviceSearch from '@/components/UserDeviceSearch'
import DeviceSensorAnalysis from '@/components/DeviceSensorAnalysis'

export default {
  name: 'BatchModel',
  components: {
    DeviceSensorAnalysis,
    AppSignal,
    DeviceSetting,
    AppSurplus,
    ProductSeriesCascade,
    SensorCameraList,
    ProvinceCityCascade,
    UserDeviceSearch,
    DeviceListSetting,
    TagDevice
  },
  data() {
    return {
      dialogTagVisible: false,
      dialogAnalysisVisible: false,
      dialogCommonSettingVisible: false,
      extendSearch: false,
      drawer: false,
      status: getSearchDeviceStatus(),
      statusList: [],
      deviceList: [],
      deviceCores: [],
      currentPage: 0,
      total: 0,
      pageSize: getPageSize(),
      provinceId: null,
      cityId: null,
      productId: null,
      seriesId: null,
      device: {},
      deviceName: getSearchDeviceName(),
      deviceCore: null,
      phoneNumber: null,
      dialogLocalVisible: false,
      form: {
        seriesName: '',
        seriesDesc: ''
      },
      userName: null,
      activeNames: null,
      dialogAddProductSeriesFormVisible: false,
      changeProductId: null,
      changeProductList: [],
      productSeriesList: [],
      enable: 1,
      lockLocal: 0,
      iconUrl: null,
      chooseDeviceCoreList: [],
      dialogQrCodeVisible: false,
      qrCodes: [],
      qrCodePrintTemp: 'solar',
      templateDeviceCore: null,
      showSetting: false,
      userId: getUserId(),
      search: {},
      follow: null,
      warnDesc: null
    }
  },
  mounted() {
    if (getQrCodeTemp()) {
      const qrCodeTemp = JSON.parse(getQrCodeTemp())
      this.coreCut = qrCodeTemp.coreCut
      this.title = qrCodeTemp.title
      this.row1 = qrCodeTemp.row1
      this.row2 = qrCodeTemp.row2
      this.row3 = qrCodeTemp.row3
      this.row4 = qrCodeTemp.row4
    }
    this.statusList = listDeviceStatus(this)
    this.pageGetDeviceDetails()
  },
  methods: {
    tag(item) {
      this.device = item
      this.dialogTagVisible = true
    },
    searchChange(item) {
      this.search = item
      this.pageGetDeviceDetails()
    },
    provinceCityChange(item) {
      this.provinceId = item.provinceId
      this.cityId = item.cityId
      this.currentPage = 1
      this.pageGetDeviceDetails()
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    formatPhoneStatus(item) {
      return formatPhoneStatus(this, item.phoneStatus)
    },
    formatDeviceStatus(item) {
      const status = formatDeviceStatus(this, item.status)
      let time
      switch (item.status) {
        case 'ONLINE':
          time = this.formatDate(item.lastOnLineTimer)
          break
        default:
          time = this.formatDate(item.lastOffLineTimer)
      }
      return status + ' ' + time
    },
    handleChange(val) {
      this.activeNames = val
    },
    handleSelectionChange(val) {
      const chooseDeviceCoreList = []
      val.forEach(function(row) {
        chooseDeviceCoreList.push(row.deviceCore)
      })
      this.chooseDeviceCoreList = chooseDeviceCoreList
    },
    getSensor(item) {
      this.device = item
      this.drawer = true
    },
    isFocusDevices() {
      this.currentPage = 1
      this.follow = true
      this.pageGetDeviceDetails()
    },
    unFocusDevices() {
      this.currentPage = 1
      this.follow = null
      this.pageGetDeviceDetails()
    },
    warnDescDevices() {
      this.currentPage = 1
      this.warnDesc = true
      this.pageGetDeviceDetails()
    },
    unWarnDescDevices() {
      this.currentPage = 1
      this.warnDesc = null
      this.pageGetDeviceDetails()
    },
    statusChange(val) {
      this.currentPage = 1
      this.pageGetDeviceDetails()
      setSearchDeviceStatus(this.status)
    },
    productChange(val) {
      this.productId = val.productId
      this.seriesId = val.seriesId
      this.currentPage = 1
      this.pageGetDeviceDetails()
    },
    searchNameChange() {
      this.currentPage = 0
      this.pageGetDeviceDetails()
      setSearchDeviceName(this.deviceName)
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetDeviceDetails()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetDeviceDetails()
    },
    deviceClick(item, index) {
      this.device = item
    },
    gotoManage(item) {
      this.device = item
      this.$router.push({
        path: '/device/manage/' + item.deviceCore,
        query: { deviceCore: item.deviceCore, deviceName: item.deviceName }
      })
    },
    deviceSetting(item, index) {
      this.device = item
      this.showSetting = true
    },
    pageGetDeviceDetails() {
      this.chooseDeviceCoreList = []
      const json = {
        productId: this.productId,
        seriesId: this.seriesId,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        status: this.status,
        phoneNumber: this.phoneNumber,
        userId: this.userId,
        provinceId: this.provinceId,
        cityId: this.cityId,
        search: this.search,
        follow: this.follow,
        warnDesc: this.warnDesc
      }
      if (this.deviceName != null && this.deviceName !== '') {
        json.deviceName = this.deviceName
      }
      pageGetDeviceDetails(json).then(res => {
        const { data, code } = res
        if (code === '200') {
          const deviceCoreList = []
          this.total = data.total

          for (let i = 0; i < data.data.length; i++) {
            deviceCoreList.push(data.data[i].deviceCore)
          }
          this.deviceCores = deviceCoreList
          if (data.data[0]) {
            this.device = data.data[0]
          }
          this.deviceList = data.data
        }
      })
    },
    phoneNumberChange() {
      this.currentPage = 0
      this.pageGetDeviceDetails()
    }
  }
}
</script>
<style scoped>

.qrCode {
  width: 475px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: center;
}

.qrCode2 {
  width: 475px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 530px;
}
</style>
